<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%--引用标签--%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<%@ include file="/WEB-INF/include/head.basic.jsp"%>
<%@ include file="/WEB-INF/include/head.ueditor.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>数据新增</title>
<script type="text/javascript" src="<c:url value='/js/jquery-form.js'/>"></script>
<script type="text/javascript">
	$(function(){
		demoBean.init();
		var ue1 = UE.getEditor('editor1', {
			initialFrameWidth : '80%',
			initialFrameHeight : 200
		});
		ue1.addListener('ready', function() {
			this.focus();
			ue1.setContent($("#remark").val());
		});
		$('#imgUpJsPic').ajaxForm({
			dataType:'json',
			method : 'post',
			beforeSend: function() {
                //表单提交前做表单验证
            },
            success: function(data) {
                //提交成功后调用
                $.messager.alert('提示', data.message, 'warning');
                if(data.code == 0){
                	$('#browse').attr('src',data.body.filePath);
                    $('#loadPath').val(data.body.filePath);
                }
            }
		});
		$('#startDate').datebox('setValue',$('#startDateHidden').val());
		$('#validate').datetimebox('setValue',$('#validateHidden').val());
	});
	//表单提交
	function forSave() {
		$("#remark").val(UE.getEditor('editor1').getContent());
		$('#picPath').val($('#loadPath').val());
		//使按钮失效防止重复提交
		$("#saveBtn").linkbutton("disable");
		$("#saveForm").submit();
	}
	
</script>
</head>
<body>
<div id="panel">
	<form:form action="save" method="post" modelAttribute="demo" id="saveForm">
		<table align="center" cellpadding="10px" style="border-spacing: 0;">
			<tr>
				<td>标题：<form:input path="title" cssClass="easyui-textbox"/></td>
				<td>KEY：<form:input path="val" cssClass="easyui-numberspinner"/></td>
				<td>状态：<form:select path="status" cssClass="easyui-combobox" cssStyle="width:150px;" data-options="editable:false"><form:option value="1">启用</form:option><form:option value="0">禁用</form:option></form:select></td>
			</tr>
			<tr>
				<td>开始时间：<form:input path="startDate" cssClass="easyui-datebox" id="startDate"/></td>
				<td>失效时间：<form:input path="validate" cssClass="easyui-datetimebox" id="validate" cssStyle="width:180px;"/></td>
				<td>
					<input type="hidden" id="startDateHidden" value="<fmt:formatDate value="${demo.startDate}" pattern="MM/dd/yyyy"/>">
					<input type="hidden" id="validateHidden" value="<fmt:formatDate value="${demo.validate}" pattern="MM/dd/yyyy HH:mm:ss"/>">
					<form:hidden path="id"/>
				</td>
			</tr>
			<tr>
				<td><form:hidden path="picPath" id="picPath"/></td>
				<td><form:hidden path="remark" id="remark"/></td>
				<td></td>
			</tr>
		</table>
	</form:form>
	<div class="easyui-tabs"  id="ttTab" align="center">
		<div title="上传图片" style="padding: 10px">
			<form action="uploadImg" enctype="multipart/form-data" id="imgUpJsPic">
				<table align="center" width=100%">
					<tr>
						<td align="right"><strong>上传图片：</strong></td>
						<td><input type="file" name="imgFile" style="width:200px;"/>&nbsp;&nbsp;<input id="submitBtn" type="submit" style="width:90px;height:25px;" value="上传"></td>
					</tr>
					<tr>
						<td align="right">图片地址：</td>
		                <td><input id="loadPath" style="width:500px" readonly="true" value="${demo.picPath}"/></td>
					</tr>
					<tr>
						<td align="center" colspan="2"><img id="browse" src="${demo.picPath}"/></td>
					</tr> 
				</table>
			</form>
		</div>
		<div title="备注" style="padding: 10px">
			<table align="center" width=100%">
				<tr width="100%">
					<td width="100%" align="center"><div id="editor1"></div></td>
				</tr>
			</table>
		</div>
	</div>
</div>
<div id="foot" style="padding:5px;text-align:center ; ">
	<a href="###" id="saveBtn" class="easyui-linkbutton" iconCls="icon-save" onclick="forSave();" >保存数据</a>
	&#160;&#160;&#160;
	<button type="button" onclick="return history.back();" class="easyui-linkbutton" iconCls="icon-back">返回</button>
</div>
</body>
<script type="application/javascript">
	var demoBean={
		options : {
			title : "测试数据信息",
			fit : false,
			iconCls:null,
			footer : "#foot",
			headerCls : "titleCss"
		},
		init:function(){
			$("#panel").panel(this.options);//设置Panel信息
		}
	};
</script>
</html>